<template>
    <div id="commodity">
        <div class="nav">
            <ul class="floor">
                <li :key="index" v-for="(item,index) in information" :class="{ 'floor-move': isActive == index }" @click="changefloor(index)">{{item.name}}
                </li>
            </ul>
            <div class="main" id="box">
                <div class="category" :key="index" v-for="(item,index) in information">
                    <h2 class="top">{{item.name}}
                        <span>{{item.description}}</span>
                    </h2>
                    <div class="hot" :key="index" v-for="(menu,index) in item.foods">
                        <img :src="menu.image_path" alt="" />
                        <div class="hot_name">
                            <h3>{{menu.name}}</h3>
                            <!-- <p>拍案，手起刀落，拆头去壳取线的整只龙虾跃然入锅，滚油中红辣青麻绕一圈，铁勺荡起盛盘，咸鲜麻辣。蔬菜按季节替换，可能与菜品图不一致。</p> -->
                            <div class="good">
                                <span>月售{{menu.month_sales}}份 </span>
                                <span>好评率{{menu.rating_count}}%</span>
                            </div>
                            <div class="addition" :key="index" v-for="(value,index) in menu.specfoods">
                                <span class="count"><i>￥</i>{{value.price}}</span>
                                <span class="add">+</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="footer">
            <div class="ai">
                <p class="gou"></p>
                <div class="div1">
                    <span class="money">￥0</span>
                    <span class="send">配送费￥2</span>
                </div>
            </div>
            <p class="start">16元起送</p>
        </div> -->
        <div class='detail-totalPrice'>
            <div class='totalPrice-cart'>
                <div class='cart'>
                    <i class='iconfont icon-gouwuche'></i>
                </div>
            </div>
            <div class='totalPrice'>
                <h3>¥{{ totalPrice }}</h3>
                <p>配送费¥5</p>
            </div>
            <div class='totalPrice-least'>
                {{ jiesuan }}
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import $ from 'jquery';
export default {
    name: 'commodity',
    data() {
        return {
            information: [],
            isActive: 0,
            // id: '',
            totalPrice:0,
            jiesuan:'¥33起送',
        }
    },
    created: function () {
        var that = this;
        // var a = window.location.href.match(/\d{9}/)[0];
        // this.id = a;

        var id = this.$store.state.id;
        console.log(id)
        axios.get('http://localhost:3000/information', {

            params: {
                latitude: that.$store.state.latitude,
                longitude: that.$store.state.longitude,
                id: id
            }

        }).then(function (res) {
            if (res) {
                var arr = res.data;
                
                console.log(arr)
                arr.map(function (item, index) {

                    var foods = item.foods;

                    foods.map(function (val, key) {
                        var a = val.image_path.split('');
                        a.splice(1, 0, '/');
                        a.splice(4, 0, '/');
                        if (a.join('').indexOf('jpeg') != -1) {
                            //    https://fuss10.elemecdn.com/a/60/f2da4c889.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/
                            val.image_path = 'https://fuss10.elemecdn.com/' + a.join('') + '.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/';
                        } else {
                            val.image_path = 'https://fuss10.elemecdn.com/' + a.join('') + '.png?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/';
                        }
                    })
                })
                that.information = arr;
                console.log(that.information)
            }
        }).catch(function (err) {
            console.log(err);
        })
    },
    // mounted(){
    //     // window.addEventListener(scroll,function(){
    //     //     console.log($(window).scrollTop())
    //     // })
    //     // $(window).scroll(function(){
    //     //     console.log($(window).scrollTop())
    //     // })
        
    // },

    methods: {
        changefloor(index) {
            // console.log(index);
            this.isActive = index;
            var Height = $('.top').eq(index).offset().top;
            // console.log(Height);
            // var arr = this.$refs.top;
            // $('.top').eq(index).scrollTop(Height); 
            // console.log($('#box').scrollTop())
            $('#box').scrollTop($('.top').eq(index).offset().top - 360);

        }
    }
}
</script>
<style scoped lang="scss">
@import '../../../static/hotcss/px2rem.scss';
.nav {
    margin-top: px2rem(350);
    width:100%;

    display: flex;
    .floor {
        overflow: auto;
        width: px2rem(170);
        height: px2rem(900);
        li {
            background: #f8f4f4;
            width: px2rem(170);
            height: px2rem(102);
            padding-top: px2rem(40);
            font-size: px2rem(25);
            text-align: center;
        }
        .floor-move {
            background: #fff;
            border-left: px2rem(5) solid #3190e8;
        }
    }
    .main {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: px2rem(900);
        background: #fff;
        overflow: auto;
        .category {
            h2 {
                background-color: #f1f1f1;
                padding-left: px2rem(20);
                line-height: px2rem(63);
                font-size: px2rem(33);
                span {
                    font-size: px2rem(24);
                }
            }
            .hot {
                display: flex;
                width: px2rem(580); // height:px2rem(290);
                padding: px2rem(30) px2rem(20);
                border-bottom: px2rem(1) solid #CCC;
                img {
                    width: px2rem(103);
                    height: px2rem(103);
                }
                .hot_name {
                    padding-left: px2rem(20);
                    display: flex;
                    flex-direction: column; // justify-content: space-between;
                    h3 {
                        display: flex;
                        justify-content: space-between;
                        font-size: px2rem(32);
                        span {

                            font-size: px2rem(20);
                            color: orange;
                            border: px2rem(1) solid orange;
                            border-radius: px2rem(30);
                        }
                    }
                    p {
                        color: #999;
                        margin-top: px2rem(40);
                        font-size: px2rem(22);
                    }
                    .good {
                        span {
                            font-size: px2rem(27);
                        }
                    }
                    .addition {
                        width: px2rem(414.72);
                        display: flex;
                        justify-content: space-between;
                        .count {
                            display: block;
                            font-size: px2rem(35);
                            color: #f60;
                            font-weight: 700;
                            i{
                                font-size: px2rem(20);
                            }
                        }
                        .add {
                            display: block;
                            width: px2rem(40);
                            height: px2rem(40);
                            line-height: px2rem(40);
                            font-size: px2rem(40);
                            color: #fff;
                            background: #3190e8;
                            border: px2rem(1)solid #cccccc;
                            border-radius: px2rem(50);
                            text-align: center;
                        }
                    }
                }
            }
        }
    }
}
.detail-totalPrice{
        height:px2rem(96);
        width: 100%;
        display: flex;
        position: fixed;
        bottom: 0;
        background: #3d3d3f;
        .totalPrice-cart{
            width: px2rem(158);
            height: 100%;
            position: relative;
            .cart{
                width: px2rem(100);
                height: px2rem(100);
                border-radius: 50%;
                background: #3d3d3f;
                position: absolute;
                top: px2rem(-20);
                left: px2rem(28);
                // border: px2rem(2) solid #444;
                i{
                    font-size: px2rem(100);
                    color: #3190e8;
                }
            }
        }

        .totalPrice{
            width: px2rem(382);
            color: #FFF;
            padding: px2rem(15) 0;
            h3{
                font-size: px2rem(35);
                line-height: px2rem(43);
                font-weight: 100;
            }
            p{
                font-size: px2rem(20);
            }
        }
        .totalPrice-least{
            flex: 1;
            text-align: center;
            line-height: px2rem(96);
            font-size: px2rem(30);
            font-weight: 700;
            color: #FFF;
            background-color: #535356;
        }
    }
.footer {
    height: px2rem(96);
    background: #282626;
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    .ai {
        display: flex;
        width: px2rem(540);
        .div1 {
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .money {
                font-size: px2rem(43);
            }
            .send {
                font-size: px2rem(24);
            }
        }

        .gou {
            margin: 0 px2rem(30);
            width: px2rem(80);
            height: px2rem(80);
            border: px2rem(4) solid #404040;
            border-radius: px2rem(50);
        }
    }
    .start {
        width: px2rem(210);
        background: #404040;
        color: #fff;
        font-size: px2rem(35);
        line-height: px2rem(96);
        text-align: center;
    }
}
</style>
